<template>

  <div class="main-header">
    <Header/>
  </div>
  <div class="main-information">
    <div class="main-information-left">
      <ul>
        <li>
          <a herf="#" class="user-img">
            <img src="/images/user.png" alt=""></img>
          </a>
        </li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
    <div class="main-information-right">

      <div class="main-information-right-title">

      </div>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
      </ul>
    </div>
  </div>

</template>



<script lang="ts">
import { gsap } from 'gsap'



export default defineComponent({
  setup(){
    const data = reactive({
      timer: ref(),
      state: ref(),
      sizeState: {
        "BIG": "big",
        "SMALL": "small"
      },
      Main_Left: ref(),
    })

    const tween = gsap.timeline({delay: 0.8})


    // 防抖，只获取一次resize
    function debounce(fn: { (): void; (): void; }, delay: number | undefined) {
      return async function() {
        if (data.timer) {
          clearTimeout(data.timer);
        }
        data.timer = setTimeout(() => {
          fn();
        }, delay);
      }
    };


    const headerResize = async() => {
      data.Main_Left = document.querySelector('.main-information-left')
      let width = window.innerWidth > 1610 ? data.sizeState.BIG : data.sizeState.SMALL
      if(data.sizeState.BIG !== width){
        data.Main_Left.classList.add('active')
        tween.to('.main-information', {duration: 0.1, ease: "power2", justifyContent: 'center',})
        tween.to('.main-information-right', {duration: 0.5, ease: "power2.out", marginRight: '0',})
        return
      }
      data.Main_Left.classList.remove('active')
      tween.to('.main-information', {duration: 0.1, ease: "power2", justifyContent: 'flex-end',})
      tween.fromTo('.main-information-right', {duration: 0.1, ease: "power2.out", x: 0}, {duration: 0.6, ease: "power2.out", marginRight: '200',})
    }

    const MainDebounce = debounce(headerResize, 500)















    onMounted(() => {
      MainDebounce()
      window.addEventListener('resize', MainDebounce)
    })
    
    onUnmounted(() => {
      window.removeEventListener('resize', MainDebounce)
    })

    return{
      ...toRefs(data)
    }

  }
})

</script>





<style scoped>

.main-header {
  position: fixed;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  z-index: 1;
}

.main-information {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 10rem;
  text-align: center;
  transition: all 0.1s ease;
}

.main-information-left {
  position: fixed;
  height: 700px;
  width: 400px;
  top: 10rem;
  left: 200px;
  transition: all 0.1s ease;
  align-items: center;
  text-align: center;
}

.main-information-left.active {
  display: none;
}

.main-information-left ul li {
  height: 160px;
  width: 100%;
  border: 1px rgb(201, 201, 201) solid;
}

.main-information-left ul li:not(:last-child) {
  margin-bottom: 20px;
}


.main-information-right {
  width: 810px;
  height: auto;
  margin-right: 200px;
  border: 1px rgb(201, 201, 201) solid;
}


.main-information-right ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.main-information-right ul li {
  height: 300px;
  width: 400px;
  border: 1px rgb(201, 201, 201) solid;
}


.main-information-right-title {
  height: 200px;
  width: 100%;
}

.user-img img{
  height: 100px;
  width: 100px;
}









</style>